<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="suggest-manger-content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :default-page-size="20" :auto="true">
			<template #top>
				<view class="" style="background-color: #F8F8F8;">
					<u-navbar :border-bottom="false" title="推荐商品" :background="{'background':'#F8F8F8'}" :title-size="36" :title-bold="true" :title-color="textColor">
						<template #right>
							<view class="u-p-r-20"  @click="addBanner" v-if="addShow">
								添加商品
							</view>	
						</template>
						
					</u-navbar>
					<view class="u-p-l-35 u-p-r-35 u-p-t-20 u-p-b-20">
						<view class="u-flex u-p-t-16 u-p-b-16" style="background-color: #fff;border-radius: 10rpx;">
							<view style="width: 66rpx;color: #999;" class="u-text-center u-font-24">序号</view>	
							<view style="flex:1; color: #999;" class="u-text-center u-font-24">商品</view>	
							<view style="width: 120rpx;" >
								<text class="u-font-24 u-m-r-10" style="color: #999;">排序</text>
								<text class="u-font-24" style="color: #999;">删除</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			
			<view class="suggest-container u-m-b-20" v-for="(item,index) in dataList" :key="index" >
				<view class=" u-p-r-35 u-p-l-35" >
					<view style="width: 100%;" class="u-flex  suggest-item">
						<view style="width: 66rpx;text-align: center;color:#999">{{index+1}}</view>
						<image :src="item.url" mode="" class="u-m-r-20" style="width: 130rpx;height: 130rpx;border-radius: 10rpx;"></image>
						<view style="flex:1;overflow: hidden;">
							<view class="u-flex u-col-top">
								<view class="item-name u-line-1" style="flex:1;">{{item.itemName}}</view>
							</view>
							<view class="item-val" style="border: 1px solid #FF551A;">
								<view class="item-val-text item-val-specifica-title">规格</view>
								<view class="item-val-text item-val-specifica-text">{{item.specification}}</view>
							</view>
							<br />
							<view class="item-val" style="border: 1px solid #C09A87;">
								<view class="item-val-text item-val-owner-title">品牌商</view>
								<view class="item-val-text item-val-owner-text">{{item.brandOwnerName}}</view>
							</view>
							<view class="u-flex u-row-between" style="width: 100%;">
								<view class="u-font-22" style="color: #999;">库存{{item.inventoryBalance}}{{item.unit||'瓶'}}</view>
							</view>
						</view>
						<view class="u-p-r-20 u-text-right" style="width: 120rpx;">
							<text class="iconfont icon-shengxu u-m-r-16" style="font-size: 40rpx;" @click="sortBySelect(index)"></text>
							<u-icon name="trash" size="44" @click="delSubmitFn(index)"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
		</z-paging>
		<akLoading isFullScreen :active="loading"></akLoading>
		<u-select v-model="sortShow" :title="'调整顺序'" @confirm="confirmSortFn" :list="sortList" :default-value="defaultSort"></u-select>
		<u-modal v-model="delModelShow" confirm-color="#ff551a" @confirm="delBannerFn" :content="'您确定要移除此商品吗？'" title="注意"></u-modal>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				sortShow:false,
				dataList: [],
				loading:false,
				delSuggestIndex:0,
				delModelShow:false,
				sortList:[],
				defaultSort:[0],
				stagChooseSort:0,
				paramsList:[],
				addShow:false,
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onShow(){
			uni.$off('refreshSuggest')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('refreshSuggest',function(data){
					//这的data就是B页面传递过来的数据
					that.$refs.paging.refresh();
			});
		},
		methods: {
			sortBySelect(index){
				this.sortShow = true;
				this.defaultSort[0] = index;
			},
			async confirmSortFn(data){
				console.log(this.paramsList);
				let stagChooseSort = this.defaultSort[0];
				let chooseSort = data[0].value;
				if(stagChooseSort===chooseSort) return;
				this.loading = true;
				let copyData = this.$u.deepClone(this.paramsList);
				let chooseData = copyData[stagChooseSort]
				let insertIndex = (stagChooseSort > chooseSort) ?chooseSort : chooseSort+1;
				copyData.splice(insertIndex,0,chooseData);//插入
				let offsetIndex = (stagChooseSort > chooseSort) ? stagChooseSort + 1 : stagChooseSort;
				copyData.splice(offsetIndex, 1);
				let ary = 
				copyData.map((item,index)=>{
					return {
						id: item,
						sort: index
					}
				});
				console.log(ary);
				let params = {
					items:ary
				}
				const res = await this.$newHttp.post('api/v1.2/Seller/SetRecommendGoods', params );
				this.loading = false;
				if(res.code === 200){
					uni.showToast({
						title:'重新排序成功'
					});
					this.$refs.paging.refresh();
				}else{
					this.$u.toast('保存数据失败，错误信息：'+res.erroMessage)
				}
			},
			// 打开删除确认框
			delSubmitFn(index){
				this.delSuggestIndex = index;
				this.delModelShow = true;
			},
			// 删除BANNER
			async delBannerFn(){
				this.loading = true;
				let ary =
				this.dataList.map((item,index)=>{
					return {
						id: item.shopInventoryId,
						sort: index
					}
				});
				ary.splice(this.delSuggestIndex,1);
				let params = {
					items:ary
				}
				const res = await this.$newHttp.post('api/v1.2/Seller/SetRecommendGoods', params );
				this.loading = false;
				if(res.code == 200){
					this.$u.toast('删除商品成功');
					this.$refs.paging.refresh();
				}else{
					this.$u.toast('修改商品失败');
				}
			},
	
			reloadFn(){
				this.$refs.paging.reload();
			},
			addBanner(){
				let chooseItemIds = [];
				if(this.dataList.length!==0){
					chooseItemIds = this.dataList.map(item=>{return {id:item.shopInventoryId,url:item.url}});
				}
				this.$mRouter.push({
					route: '/pages/sale/homePageConfig/suggestPlus?chooseItemIds='+ JSON.stringify(chooseItemIds) 
				})
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId:this.storeShop.id,
					IsRecommend: true,
					SortBy:3,
				}
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetSellerGoodsPage', { params: params } );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					this.addShow = true;
					this.$refs.paging.complete(res.data.list);
					let ary = [];
					let paramsAry = [];
					res.data.list.forEach((item,index)=>{
						ary.push({
							label: index+1,
							value: index
						});
						paramsAry.push(item.shopInventoryId);
					})
					this.sortList = ary;
					this.paramsList = paramsAry;
				}else{
					this.$refs.paging.complete(false);
				}
			},
			itemClick(item) {
				console.log('点击了', item.title);
				this.$mRouter.push({ 
					route: '/pages/sale/payorder/createPayOrder?shop='+item.id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/iconfont/iconfont.css");
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.suggest-manger-content {
		height: 100%;
		.suggest-container{
			.suggest-item{
				background-color: #fff;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.item-name{
				font-weight: 500;
				font-size: 24rpx;
			}
			.item-val{
				display: inline-block;
				font-size: 20rpx;
				box-sizing: border-box;
				border-radius: 4px;
				
				.item-val-text{
					display: inline-block;
					box-sizing: border-box;
					padding: 0rpx 10rpx;
				}
				.item-val-specifica-title{
					border-right: 1px solid #ff551a;
					background-color: #FFE1D6;
					color: #FF551A;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}
				.item-val-specifica-text{
					color: #FF551A;
				}
				.item-val-owner-title{
					border-right: 1px solid #C09A87;
					background-color: #FAF1DF;
					color: #B88D77;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}
				.item-val-owner-text{
					color: #B88D77;
				}
			}
		}
	}


</style>
